<template>
  <div class="share-List">
    <navbar @back="back" title="我分享的面经"> </navbar>
    <div class="search" @click="$router.push('/search')">
      <i class="iconfont iconicon_search"></i>
      <span>请输入关键字</span>
    </div>
    <!-- 下拉加载 -->
    <div class="list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <shareList
          :item="item"
          v-for="(item, index) in list"
          :key="index"
        ></shareList>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getShare } from '../../../api/articles.js'
export default {
  name: 'sharelist',
  data () {
    return {
      // 数据列表
      list: [],
      // 结束的事件
      finished: false,
      // 加载事件
      loading: false,
      // 开始的下标
      start: -5,
      // 页容量
      limit: 5,
      // 总条数
      total: 0
    }
  },
  methods: {
    // 返回上一页
    back () {
      this.$router.back()
    },
    async onLoad () {
      // 根据下标请求数据
      this.start += this.limit
      const res = await getShare({
        start: this.start,
        limit: this.limit
      })
      // 拼接保存数据
      //   console.log(res.data.data.list)
      //   console.log(res.data.data.total)
      this.list.push(...res.data.data.list)
      this.total = res.data.data.total
      // 关闭加载状态
      this.loading = false
      // 判断数据是否加载完毕
      if (this.list.length === this.total) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.share-List {
  .search {
    background-color: #f6f4f5;
    font-size: 16px;
    color: #c7c7c8;
    margin: 10px 15px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      font-size: 20px;
    }
  }
  .list {
    padding: 0 15px;
  }
}
</style>
